<template>
  <div class="topx-1 tops-1">
    <el-input
      v-model="obj.title"
      placeholder="请输入关键字"
      class="inpu-1"
      clearable
    />
    <el-date-picker
      v-model="obj.startTime"
      type="date"
      placeholder="起始时间"
      :size="size"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    />
    <div class="tex-1">-至-</div>
    <el-date-picker
      v-model="obj.endTime"
      type="date"
      placeholder="结束时间"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :size="size"
    />
    <el-button type="primary" class="botton" @click="add">搜索</el-button>
  </div>

  <div class="middle z-1">
    <el-tabs
      type="border-card"
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="item.label"
        :name="item.label"
        v-for="(item, index) in typeList"
        :key="index"
      >
        <LiSt
          :list="list"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></LiSt>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import LiSt from './components/LiSt.vue'
import { getNews, getTypeList } from '@/services/Application'
import type { arrs1, arrss1 } from '@/services/types/Applic'
import type { TabsPaneContext } from 'element-plus'
import { ref } from 'vue'

const size = ref<'default' | 'large' | 'small'>('default')

const activeName = ref('校内通知')

const obj = ref({
  startTime: '',
  endTime: '',
  page: 1,
  pageSize: 10,
  title: '',
  typeId: '1'
})
const list = ref<arrs1>()
const typeList = ref<arrss1>([])
const handleClick = (tab: TabsPaneContext) => {
  const foundItem = typeList.value.find((item) => item.label === tab.props.name)
    ?.value
  if (foundItem !== undefined) {
    obj.value.typeId = foundItem
    getList(obj.value)
  } else {
    // 处理错误：没有找到时
    console.error(`没有找到 label 等于 ${tab.props.name} 的项目`)
    // 可以设置一个默认值，或者留空，视业务逻辑而定
    // typeId.value = defaultValue;
  }
}
const getList = async (obj: any) => {
  const res = await getNews(obj)
  list.value = res.data
  console.log(res)
}
const getType = async () => {
  const res = await getTypeList()
  typeList.value = res.data
  console.log(res)
}
const handleSizeChange = (val: number) => {
  obj.value.pageSize = val
  getList(obj.value)
}
const handleCurrentChange = (val: number) => {
  obj.value.page = val
  getList(obj.value)
}
const add = () => {
  getList(obj.value)
}
onMounted(async () => {
  await getType()
  await getList(obj.value)
})
</script>

<style lang="scss" scoped>
.z-1 {
  min-height: 600px;
}

.topx-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inpu-1 {
  width: 300px;
  margin: 0 20px;
}
.botton {
  margin: 0 20px;
}
.tex-1 {
  margin: 0 10px;
}
</style>
